//本节课主讲:混合Mixins 类似于JS中的函数 直接拿过来调用的
//1.普通混合 是跟类选择器是一样的 一般不用
//2.不带输出的混合 .center-box02(){}在css里不输出 调不带参数的混合 ()可以省略
//3.带参数的混合 3.1带参数的混合 需要写参数
//              3.2带默认值的参数 放在前面 调用混合的时候 指定哪个值给哪个参数 无所谓顺序
//              3.3 带参数的混合  带默认值的参数 在任意位置 需要指定参数名
//              3.4@arguments的应用 获取所有的实参  在js中调用实参 transition()有四个参数 可以只写一个 也可以写多个
//              3.5 参数之间可以用逗号， 逗号常用，
//              3.6 或者是分号;隔开 编译的结果没有变化
//              3.7 使用混合的场景 3.7.1居中设置;
//                                3.7.2常见的带私有前缀的css属性 如transition (ademation 单词不对 音差不多) 不常用
//                                3.7.3页面中常见的小组件(按钮 边框 背景)

//普通混合
.center-box01{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 300px;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #bfa;
}
.box01{
  border: 1px solid #999;
  text-align: center;
  .center-box01();//调用混合
}
/*.......................................*/
//不带输出的混合 .center-box02(){}在css里不输出
.center-box02(){
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 300px;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #bfa;
}
.box02{
  //.center-box02();//调用混合 调不带参数的混合 ()可以省略
  .center-box02;
  border: 1px solid #ccc;
}
/*.......................................*/
//带参数的混合
.center-box03(@width,@height,@bgcolor){
  position: absolute;
  left: 50%;
  top: 50%;
  width: @width;
  height: @height;
  margin-left: -@width/2;
  margin-top: -@height/2;
  background-color: @bgcolor;
}
.box03{

  .center-box03(200px,400px,#f90);
}
/*.......................................*/
//带参数的混合  带默认值的参数 放在后面
.center-box04(@width,@height,@bgcolor:red){
  position: absolute;
  left: 50%;
  top: 50%;
  width: @width;
  height: @height;
  margin-left: -@width/2;
  margin-top: -@height/2;
  background-color: @bgcolor;
}
.box04{
  .center-box04(300px,100px);
}
/*.......................................*/
//带参数的混合  带默认值的参数 放在前面 调用混合的时候 指定哪个值给哪个参数
.center-box05(@width:500px,@height,@bgcolor){
  position: absolute;
  left: 50%;
  top: 50%;
  width: @width;
  height: @height;
  margin-left: -@width/2;
  margin-top: -@height/2;
  background-color: @bgcolor;
}
.box05{
  .center-box05(@height: 400px,@bgcolor: #bfa);//调用混合的时候 指定哪个值给哪个参数 无所谓顺序
}
/*.......................................*/
//@arguments的应用 获取所有的实参  在js中调用实参 transition()有四个参数 可以只写一个 也可以写多个
//在CSS里transition:1s width,height,ease,5s
.transition(@duration,@property:all,@timing-function:linear,@delay:0s){
// duration执行时间    property属性 timing-function动画效果 linear线性  delay延迟时间
  -webkit-transition:@arguments ;
  -moz-transition:@arguments ;
  transition:@arguments;
}
.box06{
  //.transition(2s);
  //.transition(2s,width);
  //.transition(2s,width,ease,5s);//参数之间可以用逗号，或者是分号;隔开 一般用逗号隔开
  .transition(2s;width;ease;5s);//参数之间可以用逗号，或者是分号;隔开 编译的结果没有变化
}
.box7{
  .transition(2s;width,height;ease;5s);
}